# SideNav

The `<SideNav>` component renders a list of links (that can be structured into levels) used for navigation.

Bumbag's navigation you see on the left is built with `<SideNav>` & it fits perfectly alongside the [PageWithSidebar component](/page-shells/page-with-sidebar).

## Import

```jsx
import { SideNav } from 'bumbag'
```

## Usage

```jsx-live
<SideNav defaultSelectedId="list">
  <SideNav.Level title="Components">
    <SideNav.Item href="#" navId="button">Button</SideNav.Item>
    <SideNav.Item href="#" navId="list">List</SideNav.Item>
    <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        href="#"
        navId="menuItem"
      >
        Menu.Item
      </SideNav.Item>
      <SideNav.Item
        href="#"
        navId="menuGroup"
      >
        Menu.Group
      </SideNav.Item>
      <SideNav.Level>
        <SideNav.Item
          navId="menuGroupProps"
          onClick={() => console.log('props')}
        >
          Props
        </SideNav.Item>
      </SideNav.Level>
    </SideNav.Level>
  </SideNav.Level>
  <SideNav.Level title="Utilities">
    <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
    <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
    <SideNav.Level>
      <SideNav.Item
        navId="roverProps"
        onClick={() => console.log('props')}
      >
        Props
      </SideNav.Item>
    </SideNav.Level>
  </SideNav.Level>
</SideNav>
```

### Controlled

By default, the state of the `SideNav` component is controlled by Bumbag. However, if you would like to control it yourself, provide the `selectedId` and `onChange` props.

```function-live
function Example() {
  const [selectedId, setSelectedId] = React.useState('list');

  return (
    <SideNav selectedId={selectedId} onChange={id => setSelectedId(id)}>
      <SideNav.Level title="Components">
        <SideNav.Item href="#" navId="button">Button</SideNav.Item>
        <SideNav.Item href="#" navId="list">List</SideNav.Item>
        <SideNav.Item href="#" navId="menu">Menu</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            href="#"
            navId="menuItem"
          >
            Menu.Item
          </SideNav.Item>
          <SideNav.Item
            href="#"
            navId="menuGroup"
          >
            Menu.Group
          </SideNav.Item>
          <SideNav.Level>
            <SideNav.Item
              navId="menuGroupProps"
              onClick={() => console.log('props')}
            >
              Props
            </SideNav.Item>
          </SideNav.Level>
        </SideNav.Level>
      </SideNav.Level>
      <SideNav.Level title="Utilities">
        <SideNav.Item href="#" navId="hidden">Hidden</SideNav.Item>
        <SideNav.Item href="#" navId="rover">Rover</SideNav.Item>
        <SideNav.Level>
          <SideNav.Item
            navId="roverProps"
            onClick={() => console.log('props')}
          >
            Props
          </SideNav.Item>
        </SideNav.Level>
      </SideNav.Level>
    </SideNav>
  );
}
```

## Props

### SideNav Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">defaultSelectedId</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the default selected nav item.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>** <Code fontSize="100" palette="primary">any</Code> 

Function to invoke when the nav item is changed.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">selectedId</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the selected nav item.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Navigation</code></strong> props</Box>

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### SideNav.Level Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">title</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>List</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">isOrdered</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the list is ordered.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">orientation</Code>** <Code fontSize="100" palette="primary">&#34;horizontal&#34; | &#34;vertical&#34;</Code> 

Indicates the orientation of the list.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### SideNav.Item Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">href</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isActive</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">navId</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>ListItem</code></strong> props</Box>

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

<Theme component="div" overrides={['SideNav.styles.base', 'SideNav.Level.styles.base', 'SideNav.Level.Title.styles.base', 'SideNav.Item.styles.base', 'SideNav.Item.styles.active']}>
  {props => (
    <SideNav defaultSelectedId="list" overrides={props.overrides}>
      <SideNavLevel title="Components">
        <SideNavItem href="#" navId="button">Button</SideNavItem>
        <SideNavItem href="#" navId="list">List</SideNavItem>
        <SideNavItem href="#" navId="menu">Menu</SideNavItem>
        <SideNavLevel>
          <SideNavItem href="#" navId="menuItem">Menu.Item</SideNavItem>
          <SideNavItem href="#" navId="menuGroup">Menu.Group</SideNavItem>
          <SideNavLevel>
            <SideNavItem navId="menuGroupProps" onClick={() => console.log('props')}>Props</SideNavItem>
          </SideNavLevel>
        </SideNavLevel>
      </SideNavLevel>
      <SideNavLevel title="Utilities">
        <SideNavItem href="#" navId="hidden">Hidden</SideNavItem>
        <SideNavItem href="#" navId="rover">Rover</SideNavItem>
        <SideNavLevel>
          <SideNavItem navId="roverProps" onClick={() => console.log('props')}>Props</SideNavItem>
        </SideNavLevel>
      </SideNavLevel>
    </SideNav>
  )}
</Theme>
